<template>
  <div class="task-item">
    <div class="text">
      <div class="tit">
        {{ data.beamNo }}
      </div>
      <div
        class="line"
        v-if="status === 3"
      >
        生产线：{{ data.beltlineName }}
      </div>
      <div
        class="item"
        v-if="status !== 1"
      >
        当前位置：{{
          data.currentStatus === 2
            ? { 0: "待存梁", 1: "已存梁", 2: "已出厂" }[data.beamStatus] ||
              data.procedureName
            : data.procedureName
        }}
      </div>
      <div
        class="item"
        v-if="data.startTime"
      >
        开始时间：{{ data.startTime | timeDate }}
      </div>
      <div
        class="item"
        v-if="data.endTime"
      >
        完成时间：{{ data.endTime | timeDate }}
      </div>
    </div>
    <div class="right">
      <div
        class="status"
        :status="data.currentStatus"
      >
        {{ currentStatus }}
      </div>
      <div
        class="option"
        v-if="status !== 3"
      >
        <van-button
          plain
          type="info"
          size="small"
          v-if="data.currentStatus === 0 && status === 1"
          @click="setTask(1)"
        >
          开始
        </van-button>
        <van-button
          plain
          type="info"
          size="small"
          v-if="data.currentStatus === 1 && status === 1"
          @click="setTask(2)"
        >
          完成
        </van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ProductItem",
  props: {
    name: {
      type: String,
      default: "",
    },
    status: {
      type: Number,
      default: 1,
    },
    data: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {};
  },
  computed: {
    currentStatus() {
      return { 0: "未开始", 1: "生产中", 2: "已生产" }[this.data.currentStatus];
    },
  },
  methods: {
    setTask() {
      this.$emit("setTask");
    }
  }
};
</script>

<style lang="scss" scoped>
.task-item {
  padding: 15px;
  border-bottom: 1px solid #f5f5f5;
  display: flex;
  min-height: 50px;
  .text {
    flex: 1;
    width: 0;
    .tit {
      font-size: 16px;
      font-weight: 600;
    }
    .line {
      font-size: 16px;
      color: #666;
      margin-top: 10px;
    }
    .item {
      font-size: 14px;
      color: #666;
      margin-top: 10px;
    }
  }
  .right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    .status {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 10px;
      &[status="0"] {
        color: #d9001b;
      }
      &[status="1"] {
        color: #f0a145;
      }
      &[status="2"] {
        color: #5483c1;
      }
    }
    .option {
      .van-button {
        font-size: 12px;
        padding: 0 15px;
      }
    }
  }
}
</style>
